<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <ArticleItem
          v-for="obj in articleList"
          :key="obj.art_id"
          :articleItem="obj"
          style="padding-buttom: 1.666666667rem"
          sticky
          @click.native="enterFn(obj.art_id)"
        >
        </ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticlesItemAPI } from '@/api'
import ArticleItem from '@/components/ArticleItem'
// List 组件通过 loading 和 finished 两个变量控制加载状态，
// 当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。

// 此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。
// 若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
export default {
  props: {
    channelId: Number
  },
  data () {
    return {
      articleList: [],
      list: [],
      loading: false,
      finished: false,
      nexttime: new Date(), // 获取新的文章对应的时间
      refreshing: false
    }
  },
  async created () {
    this.getArticleListFn()
  },
  components: {
    ArticleItem
  },
  methods: {
    // 底部加载
    async onLoad () {
      this.getArticleListFn()
    },

    // 封装一个方法函数,第二次和第一次获取文章代码相似
    async getArticleListFn () {
      const res = await getArticlesItemAPI({
        channel_id: this.channelId,
        timestamp: this.nexttime
      })
      this.articleList = [...this.articleList, ...res.data.data.results]
      // 如果pre_timestamp本次为空,则没有下一页的数据
      if (res.data?.data?.pre_timestamp === null) {
        // 可选链操作符
        this.finished = true
        this.nexttime = null
      } else {
        this.nexttime = res.data.data.pre_timestamp
      }

      this.loading = false // 获取到文章不加载了
      setTimeout(() => {
        this.refreshing = false
      }, 1000) // 下拉加载延迟一秒
    },
    // 下拉刷新功能
    onRefresh () {
      this.articleList = [] // 刷新到新的数据回来,原数组清空
      this.nexttime = new Date() // 再向后台发送一次请求,timpstamp改回最新时间
      this.getArticleListFn()
    },
    // 首页文章查看详情
    enterFn (art_id) {
      this.$router.push({
        path: '/article_detail',
        query: {
          aid: art_id
        }
      })
    }
  }
}
</script>

<style>
</style>
